<template>
	<view>
		<view class="title">
			<view>你好,</view>
			<view>欢迎来到社区在线</view>
		</view>
		<view class="input-box">
			<input type="number" placeholder="请输入手机号" v-model="phone" />
		</view>
		<view class="input-box">
			<input type="number" placeholder="请输入验证码" v-model="smsVerifyCode"/>
			<text class="getcode" @click="getma">{{ma}}</text>
		</view>
		<view class="input-box">
			<input type="password" placeholder="请输入密码" v-model="password"/>
		</view>
		<view class="register" @click="submit">保存</view>
	</view>
</template>

<script>
	import {getsms} from"../../api/login.js"
	import {setpassword} from"../../api/user.js"
	export default{
		data(){
			return{
				ma:"获取验证码",
				password:"",
				smsVerifyCode:"",
				phone:""
			}
		},
		methods:{
			async submit(){
				if(this.smsVerifyCode.trim()==""){
					this.msg("验证码未填写", "none")
					return
				}
				if(this.password.trim()==""){
					this.msg("密码未填写", "none")
					return
				}
				let res=await this.post(setpassword,{password:this.password,smsVerifyCode:this.smsVerifyCode,phone:this.phone})
				this.msg("修改成功")
				setTimeout(()=>{
					uni.navigateTo({
						url:"/pages/login/login"
					})
				},1500)
			},
			// 获取验证码
			async getma() {
				if (this.ma == "获取验证码") {
					if (this.$u.test.mobile(this.phone)) {
						let res=await this.get(getsms,{mobile:this.phone})
						// 在此发送异步
						this.msg("验证码发送成功")
						if (this.ma == "获取验证码") {
							let time = 59;
							let timer = setInterval(() => {
								if (time === 0) {
									clearInterval(timer);
									this.ma = "获取验证码"
								} else {
									this.ma = time + "s后获取";
									time--
								}
							}, 1000);
						}
					} else {
						this.msg("手机号未填写或格式不对", "none")
					}
				} else {
					this.msg("稍后重试", "none")
				}
			},
		}
	}
</script>

<style>
	.title{
		margin-top: 108rpx;
		margin-left: 78rpx;
		font-size: 50rpx;
		font-weight: 400;
		color: #000000;
	}
	.input-box{
		width: 594rpx;
		margin: 90rpx auto 0;
		border-bottom: 1px solid #E4E4E4;
		padding-bottom: 20rpx;
		font-size: 30rpx;
		display: flex;
		justify-content: space-between;
	}
	.getcode{
		font-size: 26rpx;
		color: #F09238;
	}
	.register{
		width: 594rpx;
		height: 80rpx;
		margin: 76rpx auto 0;
		background: linear-gradient(180deg, #F09238 0%, #EC5F2A 100%);
		border-radius: 40rpx;
		line-height: 80rpx;
		text-align: center;
		font-size: 30rpx;
		color: #FFFFFF;
	}
</style>
